<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/other/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="../js/other/websql.js"></script>
		<script type="text/javascript">
			mui.init();

			function creatDB() {
				console.log("新建数据库");
				websqlOpenDB();
			}

			function createTable() {
				var sql = $("#tableSql").text();
				websqlCreatTable(sql);
			}

			function insterData() {
				console.log("插入数据");
				websqlInsterDataToTable(websqlTable, "小明", "18", "175cm", "60kg");
				websqlInsterDataToTable(websqlTable, "小红", "17", "160cm", "45kg");
				websqlInsterDataToTable(websqlTable, "小强", "19", "185cm", "70kg");
				alert('执行完毕');
			}

			function updateData() {
				console.log("修改数据");
				websqlUpdateAData(websqlTable, "小明", "1000");
			}

			function deleteAData() {
				console.log("删除一条数据");
				websqlDeleteADataFromTable(websqlTable, "小明");
			}

			function deleteAllData() {
				console.log("删除全部数据");
				websqlDeleteAllDataFromTable(websqlTable);
			}

			function selectAData() {
				console.log("查找一条数据");
				websqlGetAData(websqlTable, "小明");
			}

			function selectALlData() {
				console.log("查找全部数据");
				websqlGetAllData(websqlTable);
			}
		</script>
		<style>
			button {
				display: block;
			}
			
			input {
				width: 100%;
				font-size: 12px;
				height: 28px;
			}
			
			textarea {
				font-size: 12px;
				margin-top: 7px;
			}
		</style>
	</head>

	<body>

		<div class="mui-content" align="center" style="padding-top: 10px;padding-bottom: 10px;">

			<button type="button" onclick="creatDB()">新建数据库</button>

			<textarea id="tableSql">CREATE TABLE IF  NOT EXISTS  websqlTable (rowid INTEGER PRIMARY KEY AUTOINCREMENT, NAME text,AGE text,HEIGHT text,WEIGTH text)
			</textarea>

			<button type="button" onclick="createTable()">建表</button>

			<textarea>
				websqlInsterDataToTable(websqlTable, "小明", "18", "175cm", "60kg");
				websqlInsterDataToTable(websqlTable, "小红", "17", "160cm", "45kg");
				websqlInsterDataToTable(websqlTable, "小强", "19", "185cm", "70kg");
			</textarea>

			<button type="button" onclick="insterData()">插入数据</button>

			<textarea>
				websqlDeleteADataFromTable(websqlTable, "小明");
			</textarea>

			<button type="button" onclick="deleteAData()">删除一条数据</button>

			<textarea>
			websqlDeleteAllDataFromTable(websqlTable);
			</textarea>

			<button type="button" onclick="deleteAllData()">删除全部数据</button>

			<textarea>
			websqlUpdateAData(websqlTable, "小明", "1000")
			</textarea>

			<button type="button" onclick="updateData()">修改数据</button>

			<textarea>
			websqlGetAData(websqlTable, "小明");
			</textarea>

			<button type="button" onclick="selectAData()">查找一条数据</button>

			<textarea>
			websqlGetAllData(websqlTable);
			</textarea>

			<button type="button" onclick="selectALlData()">查找全部数据</button>

		</div>

	</body>

</html>